import 'package:eh_mobile/common/utils/extension.dart';
import 'package:eh_mobile/pages/index.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';
import 'package:get/get.dart';
import '../../../../common/utils/web_rtc_channel_common.dart';
import '../../../../common/widgets/arcylic.dart';
import '../../../../global.dart';

class HomeChosePlaceView extends StatefulWidget {
  const HomeChosePlaceView({super.key});

  @override
  State<HomeChosePlaceView> createState() => _HomeChosePlaceViewState();
}

class _HomeChosePlaceViewState extends State<HomeChosePlaceView>
    with SingleTickerProviderStateMixin {
  HomepageController homepageController = Get.find<HomepageController>();
  AnimationController? animationController;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 40.w, top: ScreenUtil().statusBarHeight),
      child: Acrylic(
        width: 280.w,
        height: 132.h,
        bgColor: const Color.fromRGBO(255, 255, 255, 0.1),
        shadowColor: const Color.fromRGBO(0, 0, 0, 0.55),
        blur: 60,
        blurRadius: 50,
        borderWidth: 1,
        borderColor: const Color.fromRGBO(255, 255, 255, 0.08),
        borderRadius: BorderRadius.all(
          Radius.circular(15.r),
        ),
        child: ListView(
          children: showDeviceList(),
        ),
      ),
    );
  }

  List<Widget> showDeviceList() {
    List<Widget> list = List.generate(
      homepageController.deviceSystemList.length,
      (index) => myHomeItemView(
          infoModel: homepageController.deviceSystemList[index],
          choseIndex: index),
    );
    return list;
  }

  Widget myHomeItemView({
    required PairInfoModel infoModel,
    int choseIndex = 0,
  }) {
    return Column(
      children: [
        Container(
          alignment: Alignment.center,
          margin: EdgeInsets.only(left: 22.w, top: 19.h, bottom: 19.h),
          child: Row(
            children: [
              SvgPicture.asset('assets/svgs/homepage/ic_home_line.svg'),
              20.sizedBoxWidth,
              Text(
                infoModel.systemInfo?.name ?? '',
                style: 18.ts,
              ),
              const Expanded(child: SizedBox()),
              Visibility(
                visible: infoModel.isChose ?? false,
                child: AnimatedBuilder(
                  animation: animationController!,
                  builder: (BuildContext context, Widget? child) {
                    return Container(
                      margin: EdgeInsets.only(right: 25.w),
                      width: 42.w,
                      height: 42.w,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        gradient: RadialGradient(colors: const [
                          Color.fromRGBO(0, 255, 255, 0.08),
                          Color.fromRGBO(0, 255, 255, 0.02),
                        ], stops: [
                          animationController!.value,
                          animationController!.value + 0.1
                        ]),
                      ),
                      child: child,
                    );
                  },
                  child: UnconstrainedBox(
                    child: Container(
                      width: 12.w,
                      height: 12.w,
                      decoration: BoxDecoration(
                        color: const Color.fromRGBO(0, 255, 255, 1.0),
                        borderRadius: BorderRadius.circular(5.r),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ).onClick(() {
            PairInfoModel choseInfoModel =
                homepageController.deviceSystemList.first;
            for (PairInfoModel element in homepageController.deviceSystemList) {
              if (choseIndex == element.index) {
                infoModel.isChose = true;
                homepageController.chosePlaceStr =
                    element.systemInfo?.name ?? '';
                choseInfoModel = element;
              } else {
                element.isChose = false;
              }
            }
            homepageController.isShowCardView = false;
            animationController?.stop();
            homepageController.update([
              homepageController.chosePlaceViewId,
              homepageController.cardPlaceViewId
            ]);
            if (Global.webRtcChannel.sendChannel?.state ==
                RTCDataChannelState.RTCDataChannelOpen) {
              String str = WebRtcChannelCommon.sendInfoGetCategoryList(
                  Global.webRtcChannel.sendChannel,
                  userId: choseInfoModel.custom!.userId.toString());
            }
          }),
        ),
        Visibility(
          visible:
              infoModel.index != homepageController.deviceSystemList.length - 1,
          child: UnconstrainedBox(
            child: Container(
              margin: EdgeInsets.only(left: 40.w, right: 0.w),
              height: 1,
              width: 194.w,
              color: const Color.fromRGBO(255, 255, 255, 0.15),
            ),
          ),
        ),
      ],
    );
  }

  @override
  void initState() {
    super.initState();
    animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 4));
    animationController!.repeat();
  }

  @override
  void dispose() {
    animationController?.dispose();
    super.dispose();
  }
}
